<template>
  <!-- 在线监测头部 -->
  <div class="onlie-body">
    <el-form :inline="true"
             :model="formInline"
             label-width="1rem">
      <el-row>
        <el-col :span="4">
          <el-form-item label="所属地市:">
            <el-select v-model="formInline.region"
                       placeholder="所属地市"
                       style="width:100%">
              <el-option v-for="item in options"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="变电站:">
            <!-- <el-select v-model="formInline.region" placeholder="变电站">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select> -->
            <el-input v-model="formInline.user"
                      placeholder="变电站"
                      style="width:100%"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="电压等级:">
            <!-- <el-input v-model="formInline.user"
                      placeholder="输入名称"></el-input> -->
            <el-select v-model="formInline.region"
                       placeholder="电压等级"
                       style="width:100%">
              <el-option v-for="item in options"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="区域/房间:">
            <el-input v-model="formInline.user"
                      placeholder="区域/房间"
                      style="width:100%"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="监测类型:">
            <el-input v-model="formInline.user"
                      placeholder="监测类型"
                      style="width:100%"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4"
                class="btn">
          <el-form-item>
            <el-button type="primary"
                       @click="onSubmit">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"
                       @click="onSubmit">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
interface optionList {
  value: string;
  label: string;
}
@Component
export default class OnlieHead extends Vue {
  private options: Array<optionList> = [
    {
      value: "选项1",
      label: "黄金糕",
    },
    {
      value: "选项2",
      label: "双皮奶",
    },
    {
      value: "选项3",
      label: "蚵仔煎",
    },
  ];
  private value: string = "";
  private formInline: object = {
    user: "",
    region: "",
  };
  private onSubmit() {
    // console.log("submit!");
  }
}
</script>

<style lang='scss' scoped>
.onlie-body {
  // display: flex;
  // flex-direction: row;
  .btn {
    padding-left: 0.3rem;
  }
}
</style>
<style lang="scss">
.onlie-body {
  .el-form-item {
    margin-bottom: 0.1rem;
  }
  .el-form--inline .el-form-item__content {
    width: 55%;
  }
}
</style>

